<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>动态路径</title>
    <script src="js/Cesium.js"></script>
    <style>
        @import url(css/widgets.css);

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>

<script>
    var czml = [{
        "id" : "document",
        "name" : "CZML Path",
        "version" : "1.0",
        "clock": {
            "interval": "2012-08-04T10:00:00Z/2012-08-04T10:01:45Z",
            "currentTime": "2012-08-04T10:00:00Z",
            "multiplier": 10
        }
    }, {
        "id" : "path",
        "name" : "path with GPS flight data",
        "description" : "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
        "availability" : "2012-08-04T10:00:00Z/2012-08-04T10:01:45Z",
        "path" : {
            "material" : {
                "polylineOutline" : {
                    "color" : {
                        "rgba" : [0, 0, 0, 100]
                    },
                    "outlineColor" : {
                        "rgba" : [0, 0, 0, 255]
                    },
                    "outlineWidth" : 5
                }
            },
            "width" : 8,
            "leadTime" : 10,
            "trailTime" : 1000,
            "resolution" : 5
        },


        "billboard" : {
            // "model":"model/CesiumAir/Cesium_Air.gltf",
            // "image" : "",
            "image" : "img/test.jpg",
            "scale" : 0.25,
            "eyeOffset": {
                "cartesian": [ 0.0, 0.0, 0.0 ]
            }
        },


        "position" : {
            "epoch" : "2012-08-04T10:00:00Z",
            "cartographicDegrees" : [
                0,116.30,39.9,0,
                10,116.31,39.9,500,
                20,116.32,39.9,1000,
                30,116.33,39.9,2000,
                40,116.34,39.9,3000,
                50,116.35,39.9,2000,
                60,116.36,39.9,1000,
                70,116.37,39.9,500,
                80,116.38,39.9,100,
                90,116.39,39.9,0,
            ]
        }
    }];

    var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider : Cesium.createWorldTerrain(),
        baseLayerPicker : false,
        shouldAnimate : true
    });

    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function(ds) {
        viewer.trackedEntity = ds.entities.getById('path');
    });


</script>


</body>
</html>